<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<title></title>
		<link href="../css/mui.min.css" rel="stylesheet" />
		<link rel="stylesheet" type="text/css" href="../css/pravate/commen.css" />
		<link rel="stylesheet" href="../css/pravate/details.css" />
		<script type="text/javascript" src="../js/mui.min.js"></script>
		<script type="text/javascript" src="../js/jquery-2.1.0.js"></script>
		<script type="text/javascript" src="../js/mobile-detect.min.js" ></script>
		<script type="text/javascript" src="../js/config.js"></script>
		<script type="text/javascript" src="../js/common.js"></script>
	</head>
	<style>
		.search {
			display: inline-block;
			width: 44px;
			height: 44px;
			text-align: right;
			padding-right: 10px;
		}
	</style>

	<body>
		<header class="mui-bar mui-bar-nav" style="border-bottom: 1px solid #e7e7e7;">
			<a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a>
			<h1 class="mui-title">在线预授权列表</h1>
			<a class="mui-pull-right search"><img src="../img/ic_title_search@3x.png" /></a>
		</header>
		<div class="mui-content">
			<div class="bg-f4f4f4" id="pullrefresh">
				<div id="list"></div>
				<script type="text/template" id="model">
					{{if status=="success"}} {{each data as value i}}
					<div class="bg-fff margin-bottom-sm list-item" data-orderId='{{value.out_order_no}}'>
						<div class="mui-row mui-linehieght-30 border-bottom-e7e7">
							<div class="mui-col-sm-6 mui-col-xs-6 text-sm text-999">{{value.out_order_no}}</div>
							<div class="mui-col-sm-6 mui-col-xs-6 text-sm">
								<span class="mui-pull-right text-primary"><!--{{pay_status(value.pay_status)}}-->{{value.StatusTypeText}}</span>
							</div>
						</div>
						<div class="mui-row mui-linehieght-30">
							<div class="mui-col-sm-5 mui-col-xs-5 text-sm text-666">入住人信息</div>
							<div class="mui-col-sm-7 mui-col-xs-7 text-sm">
								<span class="mui-pull-right text-333">{{value.BookingName}}({{value.BookingPhone}})</span>
							</div>
						</div>
						<div class="mui-row mui-linehieght-30">
							<div class="mui-col-sm-5 mui-col-xs-5 text-sm text-666">预定入住时间</div>
							<div class="mui-col-sm-7 mui-col-xs-7 text-sm">
								<span class="mui-pull-right text-333">{{value.BookingTime}}</span>
							</div>
						</div>
						<div class="mui-row mui-linehieght-30">
							<div class="mui-col-sm-5 mui-col-xs-5 text-sm text-666">总计</div>
							<div class="mui-col-sm-7 mui-col-xs-7 text-sm">
								<span class="mui-pull-right text-333">￥{{value.amount}}</span>
							</div>
						</div>
						<div class="mui-row mui-linehieght-30 border-bottom-e7e7">
							<div class="mui-col-sm-5 mui-col-xs-5 text-sm text-666">备注</div>
							<div class="mui-col-sm-7 mui-col-xs-7 text-sm">
								<span class="mui-pull-right text-333">{{value.remark}}</span>
							</div>
						</div>
						<div class="mui-row mui-linehieght-30">
							<div class="mui-col-sm-5 mui-col-xs-5 text-sm text-666">收信人号码</div>
							<div class="mui-col-sm-7 mui-col-xs-7 text-sm">
								<span class="mui-pull-right text-999 text-xs">{{value.ReceivePhone}}</span>
							</div>
						</div>
					</div>
					{{/each}} {{/if}}
				</script>
			</div>
			<script type="text/javascript" src="../js/template-web.js"></script>
			<script type="text/javascript" charset="UTF-8">
				mui.init({
					pullRefresh: {
						container: '#pullrefresh',
						down: {
							style: 'circle',
							callback: pulldownRefresh
						},
						up: {
							auto: true,
							contentrefresh: '正在加载...',
							callback: pullupRefresh
						}
					}
				});
				var page = 1;
				var number = 8;
				//上拉加载
				function pullupRefresh() {
					require(weburl + SmsFundAuthList, "json", "post", {
						token: localStorage.getItem("token"),
						page: page,
						number: number
					}, function(response) {
						console.log(JSON.stringify(response));
						if(response.status == "error") {
							//参数为true代表没有更多数据了。
							mui('#pullrefresh').pullRefresh().endPullup(true);
							mui.alert(response.msg, " ", "关闭", function() {}, "div");
							return false; 
						}
						if(response.data.length < number) {
							mui('#pullrefresh').pullRefresh().endPullup(true);
							var str = template("model", response);
							$("#list").append(str);
							page++;
							return false;
						}
						var str = template("model", response);
						$("#list").append(str);
						page++;
						mui('#pullrefresh').pullRefresh().endPullup(false); //参数为true代表没有更多数据了。
					}, function(xhr) {
						console.log(JSON.stringify(xhr));
						mui.alert("网络繁忙，请稍后再试", " ", "关闭", function() {}, "div");
					})
				}

				//交易状态
				template.defaults.imports.pay_status = function(num) {
					var sta = "";
					switch(num) {
						case 1:
							sta = "已支付";
							break;
						case 2:
							sta = "已取消";
							break;
						case 3:
							sta = "待支付";
							break;
						case 4:
							sta = "已结算";
							break;
					}
					return sta;
				}

				/**
				 * 下拉刷新具体业务实现
				 */
				function pulldownRefresh() {
					page = 1;
					require(weburl + SmsFundAuthList, "json", "post", {
						token: localStorage.getItem("token"),
						page: page++,
						number: number 
					}, function(response) {
						if(response.status === "success") {
							var str = template("model", response);
							$("#list").html(str);
							return false;
						}
						mui.alert(response.msg, " ", "关闭", function() {}, "div");
					}, function() {
						mui.alert("网络繁忙，请稍后再试", " ", "关闭", function() {}, "div");
					})
					mui('#pullrefresh').pullRefresh().endPulldown();
				}

				//点击对应订单
				mui("body").on("tap", ".list-item", function() {
					mui.openWindow({
						url: "details.html",
						id: "details.html",
						extras: {
							out_order_no: $(this).attr("data-orderId")
						}
					})
				})
				//点击头部右上角搜索
				mui("body").on("tap", ".search", function() {
					mui.openWindow("orderSearchDeposit.html", "orderSearchDeposit.html");
				})
				
			</script>
		</div>
	</body>

</html>